import React from 'react';
import { useNavigate } from 'react-router';
import { List, Skeleton, Avatar } from 'antd';

const ListItem = ({ data }) => {
    const navigate = useNavigate();
    return (
        <List.Item
            actions={[
                <a onClick={() => { navigate('edit/123'); }} key="list-loadmore-edit">edit</a>,
                <a key="list-loadmore-more">more</a>,
            ]}
        >
            <Skeleton avatar title={false} loading={data.loading} active>
                <List.Item.Meta
                    avatar={<Avatar src={data.picture.large} />}
                    title={<span>{data.name?.last}</span>}
                    description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                />
                <div>content</div>
            </Skeleton>
        </List.Item>
    );
};

export default ListItem;
